import React, {Component} from 'react';
import cs from 'classnames'
import BaseCmpt from '../BaseCmpt';
import './index.css';

class HomeCardList extends BaseCmpt {

    static defaultProps = {
        data: {
            type: 105,
            isOnly: true,
            needPay: true,
            style: {
                marginTop: '10px',
                marginBottom: '10px'
            },
            vipStyle: {
                backgroundColor: '#bf5dfe'
            },
            couponStyle: {
                backgroundColor: '#5f59e5'
            },
            dataset: {
                showTy: ''
            }
        }
    };

    constructor(props) {
        super(props);
    }

    render() {
        var {onSelected, selected, data} = this.props;
        var {style, vipStyle, couponStyle, dataset} = data;
        var showTy = dataset.showTy || '';

        return (
            <div
                onClick={(e) => {
                    onSelected && onSelected(e)
                }}
                className={cs({'homeCardList cmptEle': true, 'cmptEle_selected': selected})}
                style={style}
            >
                {
                    (!showTy || showTy == 'vip') ?
                        (
                            <div className="homeCardItem homeCardItem_vip" style={vipStyle}>
                                <div className="homeCardItem__info">
                                    <img src="/asset/admin/images/editor/iconVip.png"
                                         className="homeCardItem__icon"></img>
                                    <div className="homeCardItem__titleWrap">
                                        <div className="homeCardItem__title">会员卡</div>
                                        <div className="homeCardItem__sub">会员卡，更实惠</div>
                                    </div>
                                </div>
                                <div className="homeCardItem__btn">
                                    <div className="homeCardItem__btn__text">马上开通</div>
                                </div>
                            </div>
                        )
                        : null
                }

                {
                    (!showTy || showTy == 'coupon') ?
                        (
                            <div className="homeCardItem homeCardItem_coupon" style={couponStyle}>
                                <div className="homeCardItem__info">
                                    <img src="/asset/admin/images/editor/iconCoupon.png"
                                         className="homeCardItem__icon"></img>
                                    <div className="homeCardItem__titleWrap">
                                        <div className="homeCardItem__title">优惠券</div>
                                        <div className="homeCardItem__sub">超优惠，领不停</div>
                                    </div>
                                </div>
                                <div className="homeCardItem__btn">
                                    <div className="homeCardItem__btn__text">马上领取</div>
                                </div>
                            </div>
                        )
                        : null
                }

            </div>
        );
    }
}

export default HomeCardList;
